<template>
	<el-container class="dashboard_wrap" :class="{'isSmall': smallSize}">
		<div class="das_top">
			<div class="public_title">
				<h3>机器资源信息及使用情况概况</h3>
			</div>
			<div class="tax_progress_content">
            <div class="tax_progress_content_item">
              <div class="text">
                <div class="all">
                  <h4 class="title">GPU数量</h4>
                  <div class="count">
										<span class="number-scroll">{{countObj['GPU数量'] || 0}}</span>
                    <!-- <number-scroll 
											ref="counter"
											:start="0" 
											:end="countObj['CPU使用率'] || 0" 
											:duration="1000"
											class="number-scroll"
										/> -->
                  </div>
                </div>
                <div class="done">
                  <h4 class="title">GPU进程数</h4>
                  <div class="count">
										<span class="number-scroll">{{countObj['GPU进程数'] || 0}}</span>
                    <!-- <number-scroll 
											ref="counter"
											:start="0" 
											:end="countObj.count2 || 0" 
											:duration="1000"
											class="number-scroll"
										/> -->
                    
                  </div>
                </div>
              </div>
            </div>
						<!-- 2 -->
						 <div class="tax_progress_content_item">
              <div class="text">
                <div class="all">
                  <h4 class="title">显存使用量</h4>
                  <div class="count">
										<span class="number-scroll">{{countObj['显存使用量'] || 0}}</span>
                  </div>
                </div>
                <div class="done">
                  <h4 class="title">整体显存大小</h4>
                  <div class="count">
                    <span class="number-scroll">{{countObj['整体显存大小'] || 0}}</span>
                  </div>
                </div>
              </div>
            </div>
						<!-- 3 -->
						 <div class="tax_progress_content_item">
              <div class="text">
                <div class="all">
                  <h4 class="title">内存使用量</h4>
                  <div class="count">
                    <span class="number-scroll">{{countObj['内存使用量'] || 0}}</span>
                  </div>
									
                </div>
                <div class="done">
                  <h4 class="title">整体内存大小</h4>
                  <div class="count">
                    <span class="number-scroll">{{countObj['整体内存大小'] || 0}}</span>
                  </div>
                </div>
              </div>
            </div>
						<!-- 4 -->
						<div class="tax_progress_content_item">
              <div class="text">
                <div class="all">
                  <h4 class="title">磁盘使用量</h4>
                  <div class="count">
                    <span class="number-scroll">{{countObj['磁盘使用量'] || 0}}</span>
                  </div>
                </div>
                <div class="done">
                  <h4 class="title">整体磁盘大小</h4>
                  <div class="count">
                    <span class="number-scroll">{{countObj['整体磁盘大小'] || 0}}</span>
										
                  </div>
                </div>
              </div>
            </div>
						<!-- 5 -->
						<div class="tax_progress_content_item">
              <div class="text">
                <div class="all">
                  <h4 class="title">运行模型数量</h4>
                  <div class="count">
                    <span class="number-scroll">{{modelCount['总模型数'] || 0}}</span>
                  </div>
                </div>
                <div class="done">
                  <h4 class="title">模型实例数</h4>
                  <div class="count">
                    <span class="number-scroll">{{ modelCount['总实例数']|| 0}}</span>
										
                  </div>
                </div>
              </div>
            </div>


			</div>
		</div>
		<div class="das_mid">
			<div class="dasmid_left">
				<div class="public_title">
					<h3>使用总量</h3>
				</div>
				<div class="useCount_item">
					<el-progress type="dashboard" :percentage="percentage1" color="#6f7ad3" :width="countWidth" stroke-width="10" class="progress_item">
						<template #default="{ percentage }">
							<h3 class="percentage_value">{{ percentage }}%</h3>
							<span class="percentage_label">CPU使用率</span>
						</template>
					</el-progress>
					<el-progress type="dashboard" :percentage="percentage2" color="#5cb87a" :width="countWidth" stroke-width="10" class="progress_item">
						<template #default="{ percentage }">
							<h3 class="percentage_value">{{ percentage }}%</h3>
							<span class="percentage_label">显存使用率</span>
						</template>
					</el-progress>
					<el-progress type="dashboard" :percentage="percentage3" color="#e6a23c" :width="countWidth" stroke-width="10" class="progress_item">
						<template #default="{ percentage }">
							<h3 class="percentage_value">{{ percentage }}%</h3>
							<span class="percentage_label">内存使用率</span>
						</template>
					</el-progress>
					<el-progress type="dashboard" :percentage="percentage4" color="#f56c6c" :width="countWidth" stroke-width="10" class="progress_item" >
						<template #default="{ percentage }">
							<h3 class="percentage_value">{{ percentage }}%</h3>
							<span class="percentage_label">磁盘使用率</span>
						</template>
					</el-progress>
				</div>
			</div>
			<div class="dasmid_right">
				<div class="public_title">
					<h3>当前运行模型</h3>
				</div>
				<div class="model_list">
					<scTable ref="table" :data="tableData" :params="search" row-key="id" @selection-change="selectionChange" remoteSort stripe  hideDo>
						<el-table-column label="名称" width="300">
							<template #default="scope">
								<div class="model_title">
									<img :src="imgUrl" alt="" class="model_img">
									<span>{{scope.row.模型名称 ? scope.row.模型名称 : '--'}}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="模型类型">
							<template #default="scope">
								<div class="model_title">
									<span>{{scope.row.模型类型 ? scope.row.模型类型 : '--'}}</span>
								</div>
							</template>
						</el-table-column>
						

						<el-table-column label="占用显存数" >
							<template #default="scope">
								<span>{{scope.row.显存占用 ? scope.row.显存占用 : '--'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="占用内存数" :show-overflow-tooltip="true">
							<template #default="scope">
								<span>{{scope.row.内存占用 ? scope.row.内存占用 : '--'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="实例数" >
							<template #default="scope">
								<span>{{scope.row.实例数 ? scope.row.实例数 : '--'}}</span>
							</template>
						</el-table-column>
					</scTable>
				</div>
			</div>
		</div>
	</el-container>
</template>

<script setup name="dashboard">
	const { proxy } = getCurrentInstance()
	import NumberScroll from '@/components/NumberScroll.vue'
	import { onMounted } from 'vue'
	const loading = ref(false)
	const imgUrl = ref(require('../../../public/img/ai_img.png'))
	const countObj = reactive({})
	const modelCount = reactive({})
	const percentage1 = ref(null)
	const percentage2 = ref(null)
	const percentage3 = ref(null)
	const percentage4 = ref(null)
	const colors = ref([
		{color: '#6f7ad3', percentage: 20},
		{color: '#1989fa', percentage: 40},
		{color: '#5cb87a', percentage: 60},
		{color: '#e6a23c', percentage: 80},
		{color: '#f56c6c', percentage: 100}
	])
	const tableData = ref([])
	const smallSize = ref(false)
	const countWidth = ref(200)
	const scale = ref(1)
	
	onMounted(() => {
		getCount()
		getModelCount()
		getModelList()
		calculateScale()
  	window.addEventListener('resize', calculateScale)
	})
	// 移除事件监听
	onUnmounted(() => {
		window.removeEventListener('resize', calculateScale)
	})

	// 计算缩放比例的方法
	const calculateScale = () => {
		// 以屏幕宽度为基准计算 (假设设计稿宽度为1920px)
		const designWidth = 1920
		const actualWidth = window.innerWidth
		scale.value = (actualWidth / designWidth).toFixed(2)
		if(scale.value < 0.9) {
			countWidth.value = 160
			smallSize.value = true
		} else if(scale.value > 1) {
			countWidth.value = 270
		}
		
	}
	
	//统计数据
	const getCount = async () => {
		loading.value = true
		var res = await proxy.$API.common.sourceInfo.get().then(res => {
			// countObj = res
			Object.assign(countObj, res);
			percentage1.value = countObj['CPU使用率'].replace(/%/g, "")
			percentage2.value = countObj['GPU显存使用率'].replace(/%/g, "")
			percentage3.value = countObj['内存使用率'].replace(/%/g, "")
			percentage4.value = countObj['磁盘使用率'].replace(/%/g, "")
			const str1 = countObj['GPU显存使用量'];
			const str2 = countObj['内存使用量'];
			const str3 = countObj['磁盘使用量'];
			countObj['显存使用量'] = str1.split('/')[0].trim();
			countObj['整体显存大小'] = str1.split('/')[1].trim();

			countObj['内存使用量'] = str2.split('/')[0].trim();
			countObj['整体内存大小'] = str2.split('/')[1].trim();

			countObj['磁盘使用量'] = str3.split('/')[0].trim();
			countObj['整体磁盘大小'] = str3.split('/')[1].trim();

		}).finally(() => {
			loading.value = false
		})
	}
	//模型列表
	const getModelList = async () => {
		loading.value = true
		var res = await proxy.$API.common.modelList.get().then(res => {
			// countObj = res
			tableData.value = res['模型列表']
		}).finally(() => {
			loading.value = false
		})
	}
	//运行模型数量
	const getModelCount = async () => {
		loading.value = true
		var res = await proxy.$API.common.modelCaseNum.get().then(res => {
			Object.assign(modelCount, res['实例数综合']);
			// countObj = res
			// tableData.value = res['模型列表']

		}).finally(() => {
			loading.value = false
		})
	}

	

</script>

<style lang="scss" scoped>
.dashboard_wrap{
	width: 98.5%;
	height: 100%;
	margin: 0 auto;
	background-color: #f4f4f4;
	display: flex;
	flex-direction: column;
	overflow: auto;

	.public_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 4px 0;
		margin-bottom: 14px;
		h3 {
			font-size: 16px;
		}
	}
	.das_top {
		width: 100%;
		height: 200px;
		background: #fff;
		margin: 14px 0;
		padding: 16px;
	}
	.tax_progress_content{
        height: 120px;
        display: flex;
        
        .clickItem:hover {
          cursor: pointer;
          box-shadow: 1px 2px 10px #b3b3b3;
          animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
        .tax_progress_content_item:nth-child(1){
          background-image: url(/public/img/tax_progress_content_item1.png);
        }
        .tax_progress_content_item:nth-child(2){
          background-image: url(/public/img/tax_progress_content_item2.png);
        }
        .tax_progress_content_item:nth-child(3){
          background-image: url(/public/img/tax_progress_content_item3.png);
        }
        .tax_progress_content_item:nth-child(4){
          background-image: url(/public/img/tax_progress_content_item4.png);
          
        }
				.tax_progress_content_item:nth-child(5){
          background-image: url(/public/img/tax_progress_content_item5.png);
          margin-right: 0;
        }
      }
	.tax_progress_content_item{
		flex: 1;
		margin-right: 20px;
		border-radius: 6px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&:last-child {
			margin-right: 0;
		}
		.count {
			display: flex;
			align-items: center;
		}
		.text{
			flex: 1;
			display: flex;
			color: #fff;
			.all{
				width: 58%;
				margin-right: 5px;
			}
			.title {
				font-size: 16px;
			}
			.done{
				width: 45%;
				margin-left: 5px;
			}
			h4{
				font-size: 14px;
				font-weight: normal;
				margin-bottom: 10px;
				margin-top: 6px;
			}
			.number-scroll{
				font-size: 24px;
			}
			.count_text{
				font-size: 14px;
				margin-left: 6px;
				position: relative;
				top: 6px;
			}

		}
	}
	.das_mid {
		width: 100%;
		height: 100%;
		
		display: flex;
		overflow: hidden;
		
	}
	.dasmid_left {
			width: 38%;
			min-width: 500px;
			height: 100%;
			background: #fff;
			padding: 16px;
			// margin-right: 16px;
			border-right: 1px solid #ececec;
			display: flex;
    	flex-direction: column;
			.useCount_item {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				overflow-y: auto;
    		flex: 1;
			}
			.progress_item {
				width: 50%;
				display: flex;
				justify-content: center;
			}
			.percentage_value {
				font-size: 24px;
				margin-bottom: 10px;
			}
			.percentage_label {
				font-size: 16px;
			}
		}
		.dasmid_right {
			flex: 1;
			height: 100%;
			padding: 16px;
			background: #fff;
			display: flex;
			flex-direction: column;
			overflow: auto;

		}
		.model_list {
			height:  calc(100% - 44px);
			flex: 1;
		}
		.model_title {
			height: 32px;
			width: 100%;
			display: flex;
			align-items: center;
		}
		.model_title span{
			display: flex;
			align-items: center;
			height: 100%;
			
		}
		.model_img {
			width: 32px;
			margin-right: 10px;
		}


}

.isSmall {
	.public_title h3{
		font-size: 14px;
	}
	.dasmid_left {
		.percentage_value {
			font-size: 18px;
		}
		.percentage_label {
			font-size: 12px;
		}
	}
	
	.tax_progress_content {
		height: 100px;
		
		.tax_progress_content_item {
			margin-right: 10px;
			.title {
				font-size: 12px;
			}
			.number-scroll{
				font-size: 18px;
			}
		}
	}
	
}

::v-deep .el-scrollbar__wrap {
	background: #fff;
}
::v-deep .scTable-pagination {
	position: relative;
	top: 10px;
}
</style>
